<!-- 
@author Chengzi
@time 2021年2月19日 16:37:13
@
 -->
<template>
	<view class="discount-coupon__-body-content" @tap="gotoDetail"
		:style="{'background-image': itemCont.state > 1 ? 'url(/static/img/invalid.png)':'url(/static/img/youhuijuan.png)'}">
		<view class="container">
			<view class="price-content">
				<view :class="itemCont.state > 1 ? 'small-price price-invalid':'small-price'">￥</view>
				<view :class="itemCont.state > 1 ? 'price price-invalid':'price'">{{itemCont.discounts}}</view>
				<view :class="itemCont.state > 1 ? 'small-price price-invalid':'small-price'">元</view>
			</view>
			<view :class="itemCont.state > 1 ? 'info info-invalid':'info'">满{{itemCont.need_cost}}元可用</view>
			<view :class="itemCont.state > 1 ? 'info info-invalid':'info'">有效期：{{itemCont.startTime}} 至 {{itemCont.stopTime}}</view>
		</view>
		<view class="get-content">
			<view :class="itemCont.state > 1 ? 'getBtn getBtn-invalid': itemCont.state < 1 ? 'getBtn getBtn-position':'getBtn'" @tap.stop="handelClick(itemCont)">{{itemCont.stateName}}</view>
			<i v-if="itemCont.state == -1" class="iconfont iconyilingqu"></i>
			<view v-if="itemCont.state == 0" class="acount">仅剩{{itemCont.number}}张</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemCont: {
				type: Object,
				default () {
					return {}
				}
			},
			itemIndex: [Number,String]
		},
		created() {
			
		},
		methods: {
			// 领取优惠券
			handelClick(itemCont) {
				if (itemCont.state == -1) {
					this.util.showDialog('你已达到领取上限,看看其它吧~');
				} else if (itemCont.state == 0) {
					this.$emit('event', {unid: itemCont.unid,index: this.itemIndex});
				}
			},
			// 查看优惠券详情
			gotoDetail() {
				if (this.itemCont.state >= 0) {
					this.$interface.routeLink({
						route: 'couponDetail',
						data: this.itemCont
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.discount-coupon__-body-content {
		margin: auto;
		background-size: 100% 100%;
		width: 660upx;
		height: 160upx;
		display: flex;
		justify-content: space-between;
		padding: 20upx 20upx 10upx 30upx;
		box-sizing: border-box;

		.container {
			width: 70%;

			.price-content {
				display: flex;
				align-items: flex-end;

				.price {
					color: #2F2312;
					font-size: 48upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					line-height: 72upx;
					line-height: 1;
				}

				.small-price {
					color: #312512;
					font-size: 24upx;
					font-family: Source Han Sans CN;
					margin-left: 10upx;
					line-height: 1;
				}

				.price-invalid {
					color: #666666;
				}
			}

			.info {
				color: #AA720F;
				font-size: 20upx;
				font-family: Source Han Sans CN;
				line-height: 30upx;
				margin: 8upx auto;
				white-space: nowrap;
				overflow: hidden;
			}

			.info-invalid {
				color: #999999;
			}
		}

		.get-content {
			width: 27%;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.getBtn {
				width: 132upx;
				height: 50upx;
				line-height: 50upx;
				border-radius: 13px;
				font-size: 10px;
				font-family: Source Han Sans CN;
				text-align: center;
				color: #F7D9A0;
				background: linear-gradient(90deg, #302412 0%, #513C1F 100%);
			}
			
			.getBtn-position{
				/* position: absolute; */
				top: 40upx;
			}

			.getBtn-invalid {
				color: #999999;
				background: #FFFFFF;
			}

			.iconyilingqu {
				color: #F37B1D;
				/* position: absolute; */
				top: 80upx;
				font-size: 56upx;
				margin-left: 30upx;
			}

			.acount {
				/* position: absolute; */
				top: 100upx;
				font-size: 10px;
				font-family: Source Han Sans CN;
				line-height: 15px;
				color: #AA720F;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>
